import React, { useState, useEffect, useRef } from 'react';
import kefuImg from "../../assets/images/customer.jpg"
import zijiImg from "../../assets/images/me.jpg"
import "./Message.scss"
import { Input, Toast, NavBar } from 'antd-mobile'
import useWebsocket from '../../hooks/useWebsocket';
import { v4 as uuid } from 'uuid'
type messageType = {
    id: string
    from: string
    to: string
    type: string
    content: string
}
const Message = () => {
    const [value, setValue] = useState('')
    const onsend = (e: React.KeyboardEvent) => {
        if (e.keyCode !== 13) {
            return
        }
        if (!value) {
            Toast.show({
                content: '内容不能为空',
                icon: 'fail'
            })
            return
        }
        sendMessage(JSON.stringify({
            id: uuid(),
            from: 'me',
            to: 'customer',
            content: value,
            type: 'text'
        }))
        // 将自己消息放页面中显示
        setMessagelist([...messagelist, {
            id: uuid(),
            from: 'me',
            to: 'customer',
            content: value,
            type: 'text'
        }])
        setValue('')
    }
    const { message, sendMessage } = useWebsocket('ws://localhost:23456')
    // 定义消息列表
    const [messagelist, setMessagelist] = useState<messageType[]>([
        {
            id: '1',
            from: 'customer',
            to: 'me',
            content: '您好，您刚刚咨询的这个线路8月份已经没有位置了，9月份还有',
            type: 'text'
        },
        {
            id: '2',
            from: 'me',
            to: 'customer',
            content: '那8月份还有其他线路吗？5日的',
            type: 'text'
        }
    ])
    // 监听新消息来到
    useEffect(() => {
        if (!message) {
            return
        }
        // 将消息转成对象
        const obj = JSON.parse(message)
        // console.log(obj)
        setMessagelist([...messagelist, obj])
    }, [message])
    const messageBoxDiv = useRef<HTMLDivElement>(null)
    const messageListDiv = useRef<HTMLDivElement>(null)
    useEffect(() => {
        messageBoxDiv.current!.scrollTop = messageListDiv.current!.offsetHeight - messageBoxDiv.current!.offsetHeight
    }, [messagelist])
    return (
        <div className='message'>
            <div>
                <NavBar className='nav'>北京舒途旅行社</NavBar>
            </div>
            <div className='message-box' ref={messageBoxDiv}>
                <div className='message-list' ref={messageListDiv}>
                    {/* <div className='message-item' style={{
                        flexDirection: 'row',
                        margin: '10px 30px 10px 10px'
                    }}>
                        <img src={kefuImg} />
                        <span>客服消息</span>
                    </div>
                    <div className='message-item' style={{
                        flexDirection: 'row-reverse',
                        margin: '10px 10px 10px 30px'
                    }}>
                        <img src={zijiImg} />
                        <span>自己消息</span>
                    </div> */}
                    {
                        messagelist.map(item => {
                            return <div className='message-item' style={
                                item.from === 'me'
                                    ?
                                    {
                                        flexDirection: 'row-reverse',
                                        margin: '10px 10px 10px 30px'
                                    }
                                    :
                                    {
                                        flexDirection: 'row',
                                        margin: '10px 30px 10px 10px'
                                    }
                            } key={item.id}>
                                <img className='me-head' src={item.from === 'me' ? zijiImg : kefuImg} />
                                <span className='me-message'>{item.content}</span>
                            </div>
                        })
                    }
                </div>
            </div>
            <div className='send-box'>
                <Input
                    className='send-input'
                    placeholder='请输入您想咨询的问题'
                    value={value}
                    onChange={val => {
                        setValue(val)
                    }}
                    onKeyUp={onsend}
                />
            </div>
        </div>
    );
}

export default Message;
